<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reactlesson12</title>

    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
    class RepoList extends React.Component {
        constructor(props) {
            super(props);
            this.state = {loading: true, error: null, data: null};
        }

        componentDidMount() {
            this.props.promise.then(
//                value => this.setState({loading: false, data: value}),
//                error => this.setState({loading: false, error: error})
//                value => {return this.setState({loading: false, data: value})},
//                error => {return this.setState({loading: false, error: error})}
//                (value) => {this.setState({loading: false, data: value})},
//                (error) => {this.setState({loading: false, error: error})}
                function (value) {
                    return this.setState({loading: false, data: value});
                },
                function (error) {
                    return this.setState({loading: false, error: error});
                }
            );
        }

        render() {
            if (this.state.loading) {
                return (<span>Loading...</span>);
            } else if (this.state.error != null) {
                return (<span>Error: {this.state.error.message}</span>);
            } else {
                let repos = this.state.data.items;
                let repoList = repos.map(function (repo, key) {
                    return (
                            <li key={key}>
                                <a href={repo.html_url}>{repo.name}</a>({repo.stargazers_count} stars) <br/> {repo.description})
                            </li>
                    )
                });
                return (
                        <main>
                            <h1>Most Popular JavaScript Projects in Github</h1>
                            <ol>{repoList}</ol>
                        </main>
                );
            }
        }
    }

    ReactDOM.render(
            <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,
        document.getElementById("example")
    );
</script>
</body>
</html>